<template>
	<view class="contents">
		<view class="u-flex" style="justify-content: flex-end;">
			<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }"
				:disabled="editInfoDisabled" @tap="editUserInfo">保存</button>
		</view>
		<view class="zhsztitle ustit">
			个人信息
		</view>
		<view class="zhszlist">
			<view class="zhszitem" @tap="onChooseImg">
				头像
				<image style="width: 70rpx;height: 70rpx;background: #B5B5B5;border-radius: 2rpx;"
					:src="userData.avatar" mode=""></image>
			</view>
			<view class="zhszitem">
				昵称
				<view class="">
					<input class="list-val" v-model="userData.nickname" @input="onChangeNickName"
						@blur="onChangeNickName" @confirm="onChangeNickName" placeholder="请输入昵称~" maxlength="50"
						placeholder-style="color:#c8c9cc;fontSize:28rpx" />
					<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
			<!-- <view class="zhszitem">
				性别
				<view class="">
					女 <u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view> -->
			<!-- <view class="zhszitem" @tap="bindMobile">
				手机号
				<view class="">
					<text class="list-val">{{ userInfo.mobile || '暂未绑定手机号' }}</text>
					
					 <u-icon v-if="userInfo.id && !userInfo.verification.mobile" name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view> -->
		</view>
		<!-- <view class="zhsztitle ustit">
			基本信息
		</view> -->
		<!-- <view class="zhszlist">
			<view class="zhszitem">
				修改密码
				<view class="">
					<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
			<view class="zhszitem">
				清除缓存
				<view class="">
					<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
			<view class="zhszitem">
				版本升级
				<view class="">
					v1.01 <u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
			<view class="zhszitem">
				注销账户
				<view class="">
					<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 退出登录 -->
		<button class="baocun" @tap="editUserInfo">保存</button>
		<view class="tuchu" @tap="showModal = true">
			退出登录
		</view>
		
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import Auth from '@/shopro/permission/index.js';
	import wechat from '@/shopro/wechat/wechat';
	export default {
		data() {
			return {
				platform: this.$platform.get(),
				userData: {},
				showCalendar: false,
				showModal: false,
				editInfoDisabled: true,
				thirdOauthInfo: null //第三方信息
			}
		},
		computed: {
			...mapGetters(['userInfo', 'authType'])
		},
		onLoad() {
			this.userData = JSON.parse(JSON.stringify(this.userInfo));
			this.getThirdOauthInfo();
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 选择日期
			changeCalendar(e) {
				this.userData.birthday = `${e.year}-${e.month}-${e.day}`;
				this.editInfoDisabled = this.userData.birthday == this.userInfo.birthday;
			},
			// 修改密码
			changePwd() {
				this.showAuthModal('changePwd');
			},
			// 修改昵称
			onChangeNickName() {
				this.editInfoDisabled = this.userData.nickname == this.userInfo.nickname;
			},
			// 修改手机号
			bindMobile() {
				!this.userInfo.verification.mobile && this.showAuthModal('bindMobile');
			},
			// 更换头像
			async onChooseImg() {
				let authState = 0;
				authState += await new Auth('writePhotosAlbum').check();
				if (authState < 1) return;
				authState += await new Auth('camera').check();
				if (authState < 2) return;
				const chooseImageRes = await this.chooseImage(1);
				const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
				this.userData.avatar = uploadImageRes.fullurl;
				this.userData.fileUrl = uploadImageRes.url;
				this.editInfoDisabled = this.userData.avatar == this.userInfo.avatar;
			},

			// 第三方绑定信息
			getThirdOauthInfo() {
				let that = this;
				that.$http('user.thirdOauthInfo').then(res => {
					if (res.code === 1) {
						that.thirdOauthInfo = res.data;
					}
				});
			},

			// 解绑
			unbindThirdOauth(platform, provider) {
				let that = this;
				that.$http('user.unbindThirdOauth', {
					platform,
					provider
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: res.msg
						});
						that.thirdOauthInfo = null;
						that.getUserInfo();
					}
				});
			},
			// 绑定
			async bindThirdOauth(platform, provider) {
				let that = this;
				switch (platform) {
					case 'wxOfficialAccount':
						wechat.bind();
						break;
					case 'wxMiniProgram':
						await wechat.bind();
						that.getUserInfo();
						break;
					case 'App':
						if (provider === 'Wechat') {
							await wechat.bind();
						}
						that.getUserInfo();
						that.getThirdOauthInfo();
						break;
				}
			},

			// 退出登录
			confirmLogOut() {
				this.logout();
				// this.$Router.back();
				uni.navigateBack({
					delta:1
				})
			},
			// 修改信息
			editUserInfo() {
				let that = this;
				if (!that.userData.nickname) {
					this.$u.toast('昵称不能为空');
					return false;
				}
				that.$http(
					'user.profile', {
						nickname: that.userData.nickname,
						birthday: that.userData.birthday,
						avatar: that.userData.fileUrl
					},
					'保存中...'
				).then(res => {
					if (res.code === 1) {
						that.getUserInfo();
						that.editInfoDisabled = true;
						that.$u.toast('保存成功');
					}
				});
			},
			// 图片处理-选择图片
			async chooseImage(count = 1) {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: count, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: res => {
							resolve(res.tempFilePaths);
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},
			// 图片处理-上传图片
			async uploadImage(url) {
				const that = this;
				return new Promise((resolve, reject) => {
					that.$u.toast('上传中...');
					uni.uploadFile({
						url: that.$API_URL + 'index/upload',
						filePath: url,
						name: 'file',
						success: res => {
							res = JSON.parse(res.data);
							if (res.code === 1) {
								that.$u.toast('上传成功');
								resolve(res.data);
							} else {
								that.$u.toast('上传失败');
							}
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.save-btn {
		display: none;
		color: #fff;
		background-color: #FF9A33  !important;
		width: 100rpx;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #fff !important;
		margin: 0;
	}

	.list-val {
		color: #999;
		font-size: 28rpx;
		text-align: right;
	}

	.contents {
		padding: 31rpx 20rpx 100rpx;
	}

	.zhsztitle {
		padding-left: 20rpx;
		width: calc(100% - 20rpx);
		position: relative;
		margin-bottom: 31rpx;
	}

	.zhsztitle::after {
		content: "";
		width: 10rpx;
		height: 30rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		background: #FF9A33;
	}

	.zhszitem {
		display: flex;
		padding: 45rpx 21rpx 30rpx;
		justify-content: space-between;
		align-items: center;
	}

	.zhszlist {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 50rpx;
	}

	.zhszitem>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}

	.zhszitem>view>u-icon {
		margin-left: 10rpx;
	}

	.zhszitem {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.tuchu {
		width: 500rpx;
		height: 80rpx;
		border: 1rpx solid #7C7C7C;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 40rpx auto 0;
	}
	.baocun{
		width: 500rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FF9A33;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 40vh auto 0;
		
	}
</style>
